<template>
	<div class="insuranceAdd">
		<el-row>
			<div class="grid-content bg-purple"><h2>{{tittle}}</h2><hr></div>
		</el-row>
		<el-row>
			<el-col :span="24" class="myfrom">
				<el-form :model="form">
					<el-row style="width: 100%;">
            <div style="width: 30%;float: left;margin-left: 10%">
              <el-form-item label="*用户姓名">
                <el-input v-model="form.safeName" placeholder="请输入用户姓名"></el-input>
              </el-form-item>
              <el-form-item label="*手机号">
                <el-input v-model="form.safePhone" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item label="*车牌号">
                <el-input  v-model="form.safeCompanyCarId" placeholder="请输入车牌号"></el-input>
              </el-form-item>
              <el-form-item label="*保险公司名称"><br>
                <el-select v-model="form.safeCompanyName" style="width: 100%">
                  <el-option v-for="item in company" :key="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="width: 30%;float: left;margin-left: 20%;">
              <el-form-item label="*交强保单号">
                <el-input  placeholder="请输入保单号" v-model="form.safeInformationQId"></el-input>
              </el-form-item>
              <el-form-item label="*商业保单号">
                <el-input  placeholder="请输入保单号" v-model="form.safeInformationSId"></el-input>
              </el-form-item>
              <el-form-item label="*保险公司电话">
                <el-input v-model="form.safeCPPhone" placeholder="请输入保险公司电话"></el-input>
              </el-form-item>
              <el-form-item><br><br></el-form-item>
            </div>
            <div style="width: 30%;float: left;margin-left: 10%">
              <el-form-item label="*交强起始时间">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.safeQtdate" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
              <el-form-item label="*交强终止时间">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.safeQodate" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </div>
            <div style="width: 30%;float: left;margin-left: 20%;">
              <el-form-item label="*商业起始时间">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.safeStdate" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
              <el-form-item label="*商业终止时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.safeSodate" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </div>
					</el-row>
					<el-col></el-col>
					<el-form-item label="*保单信息" style="margin-left: 130px"></el-form-item>
					<el-form-item>
						<el-row>
              <el-col :span="2"><br></el-col>
							<el-col :span="6"><h4>投保险种</h4></el-col>
							<el-col :span="6"><h4>保额（元）</h4></el-col>
							<el-col :span="6"><h4>保费金额（元）</h4></el-col>
							<el-col :span="3"><h4>含不计免赔</h4></el-col>
						</el-row>
						<el-row>
              <el-col :span="2"><br></el-col>
							<el-col :span="6" class="siName">
								<el-input v-model="form.safeinformation[0].safeInformationName" readonly></el-input>
								<el-input v-model="form.safeinformation[1].safeInformationName" readonly></el-input>
								<el-input v-model="form.safeinformation[2].safeInformationName" readonly></el-input>
								<el-input v-model="form.safeinformation[3].safeInformationName" readonly></el-input>
								<el-input v-model="form.safeinformation[4].safeInformationName" readonly></el-input>
								<el-input v-model="form.safeinformation[5].safeInformationName" readonly></el-input>
								<el-input v-model="form.safeinformation[6].safeInformationName" readonly></el-input>
								<el-input v-model="form.safeinformation[7].safeInformationName" readonly></el-input>
								<el-input v-model="form.safeinformation[8].safeInformationName" readonly></el-input>
								<el-input v-model="form.safeinformation[9].safeInformationName" readonly></el-input>
								<el-input v-model="form.safeinformation[10].safeInformationName" readonly></el-input>
								<el-input v-model="form.safeinformation[11].safeInformationName" readonly></el-input>
								<el-input v-model="form.safeinformation[12].safeInformationName" readonly></el-input>
							</el-col>
							<el-col :span="6">
								<el-input-number style="width:100%" v-model="form.safeinformation[0].safeinformationAmout" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[1].safeinformationAmout" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[2].safeinformationAmout" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[3].safeinformationAmout" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[4].safeinformationAmout" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[5].safeinformationAmout" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[6].safeinformationAmout" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[7].safeinformationAmout" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[8].safeinformationAmout" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[9].safeinformationAmout" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[10].safeinformationAmout" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[11].safeinformationAmout" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[12].safeinformationAmout" :min="0" :controls="false" :precision="0"></el-input-number>
							</el-col>
							<el-col :span="6">
								<el-input-number style="width:100%" v-model="form.safeinformation[0].safeinformationPrice" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[1].safeinformationPrice" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[2].safeinformationPrice" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[3].safeinformationPrice" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[4].safeinformationPrice" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[5].safeinformationPrice" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[6].safeinformationPrice" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[7].safeinformationPrice" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[8].safeinformationPrice" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[9].safeinformationPrice" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[10].safeinformationPrice" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[11].safeinformationPrice" :min="0" :controls="false" :precision="0"></el-input-number>
								<el-input-number style="width:100%" v-model="form.safeinformation[12].safeinformationPrice" :min="0" :controls="false" :precision="0"></el-input-number>
							</el-col>
							<el-col :span="3" style="text-align: center;">
								<el-checkbox-group class="mycheckbox" v-model="form.safeinformation[0].safeinformationNumber"><el-checkbox></el-checkbox></el-checkbox-group>
								<el-checkbox-group class="mycheckbox" v-model="form.safeinformation[1].safeinformationNumber"><el-checkbox></el-checkbox></el-checkbox-group>
								<el-checkbox-group class="mycheckbox" v-model="form.safeinformation[2].safeinformationNumber"><el-checkbox></el-checkbox></el-checkbox-group>
								<el-checkbox-group class="mycheckbox" v-model="form.safeinformation[3].safeinformationNumber"><el-checkbox></el-checkbox></el-checkbox-group>
								<el-checkbox-group class="mycheckbox" v-model="form.safeinformation[4].safeinformationNumber"><el-checkbox></el-checkbox></el-checkbox-group>
								<el-checkbox-group class="mycheckbox" v-model="form.safeinformation[5].safeinformationNumber"><el-checkbox></el-checkbox></el-checkbox-group>
								<el-checkbox-group class="mycheckbox" v-model="form.safeinformation[6].safeinformationNumber"><el-checkbox></el-checkbox></el-checkbox-group>
								<el-checkbox-group class="mycheckbox" v-model="form.safeinformation[7].safeinformationNumber"><el-checkbox></el-checkbox></el-checkbox-group>
								<el-checkbox-group class="mycheckbox" v-model="form.safeinformation[8].safeinformationNumber"><el-checkbox></el-checkbox></el-checkbox-group>
								<el-checkbox-group class="mycheckbox" v-model="form.safeinformation[9].safeinformationNumber"><el-checkbox></el-checkbox></el-checkbox-group>
								<el-checkbox-group class="mycheckbox" v-model="form.safeinformation[10].safeinformationNumber"><el-checkbox></el-checkbox></el-checkbox-group>
								<el-checkbox-group class="mycheckbox" v-model="form.safeinformation[11].safeinformationNumber"><el-checkbox></el-checkbox></el-checkbox-group>
								<el-checkbox-group class="mycheckbox" v-model="form.safeinformation[12].safeinformationNumber"><el-checkbox></el-checkbox></el-checkbox-group>
						</el-col>
						</el-row>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="12">
				<router-link :to="{path:'/insuremanage'}">
					<el-button type="primary" @click="myadd">保存</el-button>
				</router-link>
			</el-col>
			<el-col :span="12">
				<router-link :to="{path:'/insuremanage'}"><el-button type="danger">取消</el-button></router-link>
			</el-col>
		</el-row>
		
	</div>
</template>

<script>
	export default{
		name:"myBXadd",
		props:{
			tittle:{
				type:String,
				default:"保险详情_添加"
			}
		},
		methods:{
			myadd(){
				this.axios.post("http://172.16.5.167:8080/safe/safeInformation/insertAll",this.form,{
					headers:{
					"Content-Type":"application/json"
					},
				}
				).then(response=>{
					if(response.status==200){
						alert("成功")
						console.log(response)
					}
				})
				.catch(error=>alert(error))
			},
		},
		data(){
			return {
				readonly: true,
				form: {
					safeName:'',
					safePhone:'',
					safeCompanyCarId:'',
					plateNumber:'',
					safeCompanyName:'',
					safeInformationQId:'',
					safeInformationSId:'',
					safeCPPhone:'',
					safeQtdate:'',
					safeQodate:'',
					safeStdate:'',
					safeSodate:'',
					safeinformation:[{
							safeInformationName:"交强险",
							safeinformationAmout:"",
							safeinformationPrice:"",
							safeinformationNumber:false,
						},
						{
							safeInformationName:"车船险",
							safeinformationAmout:"",
							safeinformationPrice:"",
							safeinformationNumber:false,
						},
						{
							safeInformationName:"车船损失险",
							safeinformationAmout:"",
							safeinformationPrice:"",
							safeinformationNumber:false,
						},
						{
							safeInformationName:"第三者责任险",
							safeinformationAmout:"",
							safeinformationPrice:"",
							safeinformationNumber:false,
						},
						{
							safeInformationName:"司机责任险",
							safeinformationAmout:"",
							safeinformationPrice:"",
							safeinformationNumber:false,
						},
						{
							safeInformationName:"乘客责任险",
							safeinformationAmout:"",
							safeinformationPrice:"",
							safeinformationNumber:false,
						},
						{
							safeInformationName:"玻璃单独破损险",
							safeinformationAmout:"",
							safeinformationPrice:"",
							safeinformationNumber:false,
						},
						{
							safeInformationName:"机动车被盗险",
							safeinformationAmout:"",
							safeinformationPrice:"",
							safeinformationNumber:false,
						},
						{
							safeInformationName:"自然损失险",
							safeinformationAmout:"",
							safeinformationPrice:"",
							safeinformationNumber:false,
						},
						{
							safeInformationName:"车身划痕损失险",
							safeinformationAmout:"",
							safeinformationPrice:"",
							safeinformationNumber:false,
						},
						{
							safeInformationName:"发动机特别损失险",
							safeinformationAmout:"",
							safeinformationPrice:"",
							safeinformationNumber:false,
						},
						{
							safeInformationName:"不计免赔险",
							safeinformationAmout:"",
							safeinformationPrice:"",
							safeinformationNumber:false,
						},
						{
							safeInformationName:"无法找到第三方特约险",
							safeinformationAmout:"",
							safeinformationPrice:"",
							safeinformationNumber:false,
						},
					],
				},
				// 模拟获取的公司
				company:[
						"中国人寿",
						"中国平安",
						"太平洋保险",
				],
			}
		},
	}
</script>

<style scoped>
	.myBXadd{text-align: left;}
	.myfrom>el-form>span{color: red;}
	.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{background-color:lightgreen;border-color: lightgreen;}
	.mycheckbox{
		height: 40.4px
	}
  el-input{
    width: 300px;
  }
</style>
